<template>
  <div class="image-upload">
    <!-- <h1>图片上传</h1> -->
    <!-- 
        action:设置默认上传文件的请求地址
        http-request：自定义上传文件，用于覆盖action属性
        file-list：文件上传列表，用于图片回显

     -->
    <el-upload
      :class="{ disable: filelist.length > 0 }"
      action="#"
      list-type="picture-card"
      :http-request="uploadFn"
      :file-list="filelist"
      :on-change="onSuccessFn"
      :on-remove="removeFn"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-progress
      :text-inside="true"
      :stroke-width="15"
      :percentage="percent"
      v-show="showProgress"
    ></el-progress>
  </div>
</template>

<script>
import COS from "cos-js-sdk-v5";
var cos = new COS({
  // 添加 ID 和 密匙
  SecretId: "AKIDA9sKVP3SaR3OSFm33nHWVEixvc2MVP3Q",
  SecretKey: "8zauylIZaKo36tPfeNp240lGWXIn24tT",
});
export default {
  data() {
    return {
      filelist: [], // 存上传图片的路径，用于图片回显
      percent: 0, //  控制进度条百分比
      showProgress: false, //  控制进度条显隐
    };
  },

  methods: {
    //   图片上传成功触发函数
    onSuccessFn(response) {
      this.showProgress = true;
      this.filelist.push({
        //   图片（本地）地址路径，用于未上传成功时，立马有图片回显 ！！
        url: response.url,
        status: "ready",
      });
    },
    uploadFn(file) {
      // 实现图片上传到腾讯云
      //  截取文件名
      const fileName = file.file.name.split(".")[0];
      cos.putObject(
        {
          Bucket: "hr-project-73-1311280016" /* 储存桶名字 必须 */,
          Region: "ap-nanjing" /* 存储桶所在地域，必须字段 */,
          Key: fileName /* 上传后的文件名 自定义即可 必须 */,
          StorageClass: "STANDARD",
          Body: file.file, // 上传文件对象
          //   progressData 上传进度，0.1~1.0 ，显示1.0 即为上传完毕
          onProgress: (progressData) => {
            // console.log(JSON.stringify(progressData));
            // 设置图片上传进度百分比
            this.percent = progressData.percent * 100;
          },
        },
        (err, data) => {
          if (err) {
            return this.$message.error("图片上传失败");
          }
          //   图片（线上）地址路径
          this.filelist[0].url = "https://" + data.Location;
          //   图片右上角显示的“ 打勾 ”
          this.filelist[0].status = "success";
          this.showProgress = false;
        }
      );
    },

    // 删除图片按钮
    removeFn() {
      this.filelist = [];
    },
  },
};
</script>

<style lang='scss'>
.image-upload {
  position: relative;
  display: inline-block;
  .disable {
    .el-upload--picture-card {
      display: none;
    }
  }
  .el-progress {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}
</style>